<template>
  <div id="index">
    <v-head @slider="checkSlider"></v-head>
    <div class="tabs-wrapper">
      <v-tabs :tabs="tabs" v-if="tabs" @tabChange="tabChange"></v-tabs>
    </div>
      <v-topics-list ref="listView" :data="topicsData" @scrollMore="scrollMore" @refresh="refresh"></v-topics-list>
    <v-user-bar v-model="showUserBar"></v-user-bar>
  </div>
</template>

<script type="text/ecmascript-6">
  import Header from 'components/header/header'
  import Tabs from 'components/tabs/tabs'
  import TopicsList from 'components/topics-list/topics-list'
  import UserBar from 'components/user-bar/user-bar'
  import {mapMutations, mapActions, mapGetters} from 'vuex'
  import {Loading} from 'common/js/mixin'

  export default {
    name: 'index',
    mixins: [Loading],
    data() {
      return {
        tabs: [
          {
            'title': '全部',
            'value': 'all'
          },
          {
            'title': '精华',
            'value': 'good'
          },
          {
            'title': '分享',
            'value': 'share'
          },
          {
            'title': '问答',
            'value': 'ask'
          },
          {
            'title': '招聘',
            'value': 'job'
          },
          {
            'title': '客户端',
            'value': 'dev'
          }
        ],
        showUserBar: false,
        currentTab: '',
        page: 1,
        topicsData: []
      }
    },
    computed: {
      ...mapGetters([
        'topicsList'
      ])
    },
    created() {
      this.currentTab = 'all'
      this.setIndexValue(this.currentTab)
      this._getTopicsList(this.currentTab)
    },
    methods: {
      tabChange(val) {
        this.currentTab = val
        this.setIndexValue(val)
        this.page = 1
        this._getTopicsList(val).then((res) => {
          this.$refs.listView.scrollToTop(0)
        })
      },
      checkSlider(val) {
        this.showUserBar = val
      },
      refresh() {
        this.page = 1
        this._getTopicsList(this.currentTab).then((res) => {
          this.$refs.listView.refreshOver(res)
        })
      },
      scrollMore() {
        this.MoreTopics({
          tab: this.currentTab,
          page: this.page
        }).then((res) => {
          if (res === true) {
            this.topicsData = this.topicsList
            this.page++
            this.$refs.listView.loadMoreOver()
          } else {
            this.$refs.listView.loadMoreOver()
          }
        })
      },
      _getTopicsList(val) {
        // 显示正在加载中
        this.showLoading({})
        return this.TopicsList(val).then((res) => {
          // 关闭正在加载中
          this.closeLoading()
          if (res === true) {
            this.topicsData = this.topicsList
            this.page++
            return true
          } else {
            return false
          }
        })
      },
      ...mapActions([
        'TopicsList',
        'MoreTopics'
      ]),
      ...mapMutations({
        setIndexValue: 'SET_INDEX_VALUE'
      })
    },
    components: {
      'v-head': Header,
      'v-tabs': Tabs,
      'v-user-bar': UserBar,
      'v-topics-list': TopicsList
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  #index {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    .tabs-wrapper {
      background-color: $color-background-ll;
      width: 100%;
      height: 39px;
      border-top: 1px solid $color-text-d;
      .tabs {
        overflow: hidden;
        display: flex;
        font-size: $font-size-medium;
        padding-bottom: 4px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        position: relative;
      }
    }
  }
</style>
